<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>银行卡</title>
    <link rel="stylesheet" href="css/base.css" />
    <link rel="stylesheet" href="css/all.css" />
    <link rel="stylesheet" href="css/bank-card.css" />
</head>
<body>
<div>
    <div class="heads">
        <span href="javascript:;" onclick="go()"><img src="img/zuojiantou.png" alt="" class="arrows"></span>
        <h1 class="titles">银行卡</h1>
    </div>
    <div class="middle">
    	<div id="have-bank">
	        <div class="message">
	                <div class="messages row">
	                    <div class="message-one">
	                        <img src="img/jianshe1.png" alt="">
	                    </div>
	                   <div class="message-four">
	                       <p class="message-two">建设银行</p>
	                       <p class="message-three">储蓄卡</p>
	                   </div>
	                </div>
	            <p  class="number">**** **** **** 6828</p>
	        </div>
	      
	    </div>
        <div onclick="location.href='./add-bank-card.html'">
        <div class="tianjia row">
            <div class="tianjia-one">
                <img src="img/tianjia2.png" alt="">
            </div>
            <div class="tianjia-two">
                <p>添加银行卡</p>
            </div>
        </div>
        </div>
    </div>
</div>
<script src="js/x_rem.js"></script>
<script src="js/jquery.js"></script>
<script src="js/secondLevel.js"></script>
<script src="js/all.js"></script>
<script type="text/javascript">
	$.ajax({
		type:"post",
		url: Url + "/bankCard/selectMyBankCard",
		xhrFields:{
			withCredentials: true
		},
		data:{
			
		},
		success:((data)=>{
			console.log(data);
			
			var html="";
			for(let i=0; i<data.message.length; i++){
				var cardNum = data.message[i].cardNum.slice(-4);
				html+=`
				 	<div class="message">
		                <div class="messages row">
		                    <div class="message-one">
		                        <img src="${data.message[i].bankTypeId.picture}" alt="">
		                    </div>
		                   <div class="message-four">
		                       <p class="message-two">${data.message[i].bankTypeId.bankName}</p>
		                       <p class="message-three">储蓄卡</p>
		                   </div>
		                </div>
			            <p  class="number">**** **** **** ${cardNum}</p>
			        </div> 		
				`
				
				
			}
			$("#have-bank").html(html);
			
		}),
		error:((err)=>{
			console.log(err);
		})
	});
	
	
	
</script>
</body>
</html>